// Tabs

@import '../../style/themes/default';
@import '../../style/mixins/index';
@import './param';

@mixin tabs {
  display: flex;
  overflow: hidden;
  &-contents {
    flex: 1;
    display: flex;
    overflow: hidden;
    flex-direction: row;
    > .x-tab-content {
      flex-shrink: 0;
      width: 100%;
      opacity: 1;
      height: fit-content;
      &.x-tab-content-unactivated {
        transition: height 0s, opacity 0s;
        height: 0;
        opacity: 0;
      }
    }
    &-animated {
      > .x-tab-content {
        transition: transform $--x-animation-duration-slow cubic-bezier(0.645, 0.045, 0.355, 1), height 0s,
          opacity $--x-animation-duration-slow;
        &.x-tab-content-unactivated {
          display: inherit;
        }
      }
    }
  }
  &-list {
    display: flex;
  }
  &-top {
    flex-direction: column;
  }
  &-right {
    flex-direction: row-reverse;
  }
  &-bottom {
    flex-direction: column-reverse;
  }
  &-left {
    flex-direction: row;
  }

  @include block(top, bottom, bottom-left-radius, bottom-right-radius);
  @include block(right, left, top-left-radius, bottom-left-radius);
  @include block(bottom, top, top-left-radius, top-right-radius);
  @include block(left, right, top-right-radius, bottom-right-radius);

  @include tag(top, bottom, top-left-radius, top-right-radius, left, bottom, width, bottom);
  @include tag(right, left, top-right-radius, bottom-right-radius, top, left, height, left);
  @include tag(bottom, bottom, bottom-left-radius, bottom-right-radius, left, top, width, top);
  @include tag(left, right, top-left-radius, bottom-left-radius, top, right, height, right);

  @include card(top, bottom, width, top, bottom, left, right, first, left, last, right);
  @include card(right, left, height, left, right, top, bottom, first, top, last, bottom);
  @include card(bottom, top, width, top, bottom, left, right, first, left, last, right);
  @include card(left, right, height, left, right, top, bottom, first, top, last, bottom);
}

@mixin block($layout, $border, $border-radius-first, $border-radius-second) {
  &-block {
    &.#{$--x-tabs-prefix} {
      &-#{$layout} {
        > .#{$--x-tabs-prefix}-list {
          border-#{$border}: $--x-border-base;
          > x-slider {
            width: 100%;
            .x-slider-scroll > ul > li {
              &.x-slider-highlight {
                border-#{$border}: none;
                border-#{$border-radius-first}: 0;
                border-#{$border-radius-second}: 0;
              }
            }
          }
        }
      }
    }
  }
}

@mixin tag($layout, $border, $border-radio-first, $border-radio-second, $border-none, $border-activated, $border-size, $border-position) {
  &-tag {
    &.#{$--x-tabs-prefix} {
      &-#{$layout} {
        .#{$--x-tabs-prefix}-list {
          border-#{$border}: none;
          > x-slider {
            width: 100%;
            .x-slider {
              &::before {
                content: ' ';
                position: absolute;
                #{$border-position}: 0;
                #{$border-size}: 100%;
                border-#{$border}: $--x-border-base;
              }
              &-scroll {
                > ul {
                  z-index: 1;
                  > li {
                    border: $--x-border-base;
                    background-color: $--x-background;
                    &:first-child {
                      border-#{$border-radio-first}: 0.125rem;
                    }
                    &:nth-last-child(2) {
                      border-#{$border-radio-second}: 0.125rem;
                    }
                    &:not(:first-child) {
                      border-#{$border-none}: none;
                    }
                    &.x-slider-highlight {
                      display: none;
                    }
                    &.x-slider-activated {
                      border-#{$border-activated}-color: $--x-background;
                    }
                  }
                }
              }
            }
          }
        }
      }
    }
  }
}

@mixin card(
  $layout,
  $border,
  $border-size,
  $border-position-first,
  $border-position-second,
  $border-li-first,
  $border-li-second,
  $sort-first,
  $sort-border-first,
  $sort-second: '',
  $sort-border-second: ''
) {
  &-card {
    &.#{$--x-tabs-prefix} {
      &-#{$layout} {
        border: $--x-border-base;
        border-#{$layout}: none;
        box-shadow: $--x-box-shadow-light;
        .#{$--x-tabs-prefix}-list {
          border-#{$border}: none;
          > x-slider {
            width: 100%;
            .x-slider {
              &-scroll {
                background-color: $--x-background;
                &::after,
                &::before {
                  content: ' ';
                  position: absolute;
                  #{$border-size}: 100%;
                  border-#{$border}: $--x-border-base;
                }
                &::after {
                  #{$border-position-first}: 0;
                }
                &::before {
                  #{$border-position-second}: 0;
                }
                > ul {
                  z-index: 1;
                  > li {
                    &.x-slider-highlight {
                      border-#{$border-li-first}: $--x-border-base;
                      border-#{$border-li-second}: $--x-border-base;
                      border-#{$border}-color: $--x-background;
                      background-color: $--x-background;
                    }
                    &.x-slider-activated {
                      border-#{$border}-color: $--x-background;
                    }
                  }
                }
              }
              &-arrow-left {
                border: $--x-border-base;
                border-#{$border-li-first}: 0;
              }
              &-arrow-right {
                border-#{$border-li-first}: $--x-border-base;
              }
            }
          }
        }
        &.#{$--x-tabs-prefix}-is-#{$sort-first} {
          .#{$--x-tabs-prefix}-list {
            > x-slider {
              .x-slider {
                &-scroll {
                  &.x-justify-start ul li {
                    &.x-slider-highlight {
                      border-#{$sort-border-first}: none;
                    }
                  }
                  &.x-justify-center ul li {
                    &.x-slider-highlight {
                      border-#{$sort-border-first}: $--x-border-base;
                    }
                  }
                  &.x-justify-end ul li {
                    &.x-slider-highlight {
                      border-#{$sort-border-first}: $--x-border-base;
                    }
                  }
                }
              }
            }
          }
        }
        &.#{$--x-tabs-prefix}-is-#{$sort-second} {
          .#{$--x-tabs-prefix}-list {
            > x-slider {
              .x-slider {
                &-scroll {
                  &.x-justify-start ul li {
                    &.x-slider-highlight {
                      border-#{$sort-border-second}: $--x-border-base;
                    }
                  }
                  &.x-justify-center ul li {
                    &.x-slider-highlight {
                      border-#{$sort-border-second}: $--x-border-base;
                    }
                  }
                  &.x-justify-end ul li {
                    &.x-slider-highlight {
                      border-#{$sort-border-second}: none;
                    }
                  }
                }
              }
            }
          }
        }
      }
    }
  }
}
